<template>
	<div class="home-container">
		<div class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<!--支持循环，需要重复图片节点-->
				<div class="mui-slider-item mui-slider-item-duplicate"><a href="javascript:;"><img src="../images/home_ba01.jpg" /></a></div>
				<div class="mui-slider-item"><a href="javascript:;"><img src="../images/home_ba01.jpg" /></a></div>
				<!--支持循环，需要重复图片节点-->
				<div class="mui-slider-item mui-slider-item-duplicate"><a href="javascript:;"><img src="../images/home_ba01.jpg" /></a></div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator"></div>
			</div>
			<!-- <div class="top-bar display-box">
				<div class="location flex-box">无锡&nbsp;<i class="iconfont">&#xe622;</i></div>
				<div class="search-bar flex-box">
					<i class="iconfont search-icon">&#xe602;</i>
					<input type="text" name="" placeholder="活动名称">
				</div>
			</div> -->
			<div class="top-sub-bar display-box">
				<div class="car-brand">
					<div class="mui-pull-right carInfo" v-if="carPlateNumber!=''&&carPlateNumber!=null" v-link="{name:'ucenterCar',params:{from:'ucenter'}}">
                        <img class="carLogo" v-bind:src="carBrandImage" >
                        <span class="right-text font-16" style="vertical-align:middle;">{{carModel}}</span>
                    </div>
                    <div class="mui-pull-right carInfo" v-if="carPlateNumber==''||carPlateNumber==null">
                        <span class="right-text font-16 " v-link="{name:'ucenterCar',params:{from:'ucenter'}}">绑定车辆</span>
                    </div>
				</div>
				<div class="car-mileage font-16 " v-if="car.carMileage==null">里程0km</div>
				<div class="car-mileage font-16" v-if="car.carMileage!=null">里程{{car.carMileage}}km</div>

			</div>
		</div>
		<div class="service-entry">
			<ul class="clearfix">
				<li class="item" :style="{height:height}">
					<a href="javascript:;" @click="goBY()">
						<div class="iconbox icon-by"></div>
						<p>上门保养</p>
					</a>
				</li>
				<li class="item" :style="{height:height}">
					<a href="javascript:;" @click="goKQLX()">
						<div class="iconbox icon-kq"></div>
						<p>换空气滤</p>
					</a>
				</li>
				<li class="item" :style="{height:height}">
					<a href="javascript:;" @click="goKTLX()">
						<div class="iconbox icon-kt"></div>
						<p>换空调滤</p>
					</a>
				</li>
				<li class="item" :style="{height:height}">
					<div class="iconbox icon-bp" v-link="{name:'enterprise',params:{from:'default'}}"></div>
					<p>钣金喷漆</p>
				</li>
			</ul>
		</div>
		<div class="car-doctor-entry">
			<h3 class="car-doctor-tit">车大夫解答</h3>
			<p class="car-doctor-sectit">已解决超过100万用车问题</p>
			<a class="contact-right-now"  v-link="{name:'customerServiceList'}">立即咨询</a>
			<!-- <a class="question-list">问题集锦</a> -->
		</div>
		<div class="activity-tit">精彩活动</div>
		<div class="activity-con">
			<a>
				<img src="../images/act_ba.png">
			</a>
		</div>
		<footer-nav-component index="home"/>
	</div>
</template>
<style type="text/css" scoped>
	.home-container{padding-bottom:51px;}
	.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
	.display-box{display:box;display:-webkit-box;display:-moz-box;}
	.top-bar{position:absolute;top:0;left:0;width:100%;padding:10px;}
	.location{text-align:center;color:#fff;line-height:34px;}
	.flex-box{box-flex:1;-webkit-box-flex:1;-moz-box-flex:1;}
	.search-bar{box-flex:3;-webkit-box-flex:3;-moz-box-flex:3;position:relative;}
	.search-icon{position:absolute;top:2px;left:10px;color:#ccc;font-size:20px;}
	.search-bar input{background:#f2f2f2;border-radius:1000px;padding-left:30px;}
	.top-sub-bar{position:absolute;top:0px;width:100%;padding:10px;left:0;}
	.car-brand{box-flex:1;-webkit-box-flex:1;-moz-box-flex:1;color:#fff;line-height:22px;}
	.car-brand i{font-size:20px;}
	.car-mileage{box-flex:1;-webkit-box-flex:1;-moz-box-flex:1;position:relative;padding-left:10px;line-height:22px;padding-top:2px;color:#fff;}
	.car-mileage:before{content:"";width:1px;height:14px;position:absolute;left:0;top:50%;transform:translateY(-50%);background:#fff;}
	.service-entry,.car-doctor-entry{margin-top:10px;}
	.service-entry ul{list-style:none;padding:0;margin:0;}
	.service-entry .item{float:left;width:25%;height:25vw;background:#fff;text-align:center;}
	.iconbox{height:70%;background-position:50% 50%;background-repeat:no-repeat;background-size: 50%;}
	.icon-by{background-image:url(../images/by.png);}
	.icon-kq{background-image:url(../images/kq.png);}
	.icon-kt{background-image:url(../images/kt.png);}
	.icon-bp{background-image:url(../images/bp.png);}
	.car-doctor-entry{height:200px;background:url(../images/car_doctor.jpg);background-size:cover;}
	.car-doctor-tit{padding:15px 0 10px 15px;color:#6880ac;margin:0;line-height:1;}
	.car-doctor-sectit{margin:0 0 20px 15px;color:#99b5e6;line-height:1;}
	.car-doctor-entry a{display:block;width:100px;border:1px solid #ef8f0d;color:#ef8f0d;border-radius:1000px;text-align:center;margin:0 0 10px 10px;background:rgba(255,255,255,.8);}
	.activity-tit{line-height:37px;text-align:center;}
	.activity-con img{max-width:100%;}
	.carLogo{display: inline-block; width: 0.55rem; height: 0.55rem; background-size: 95%; background-repeat: no-repeat; vertical-align: middle;border-radius:50%;}
	.mui-slider .mui-slider-group .mui-slider-item{height:auto;}
</style>
<script type="text/ecmascript-6">
	import Page from '../base/Page';
	import { API } from '../config/constants';
	import footerNavComponent from '../components/footer-nav/footer-nav.vue';
	export default new Page({
		vuex:{
			getters:{
				carPlateNumber:function(state){
				    if(state.mycar.carPlateNumber==undefined||state.mycar.carPlateNumber==null){
				        return '';
                    }else {
                        return state.mycar.carPlateNumber;
                    };
				},
				carBrandModel:function(state){
					return state.mycar.carBrandModel;
				},
				carBrand:function(state){
					return state.mycar.carBrand;
				},
				carModel:function(state){
					return state.mycar.carModel;
				},
				carModeldetail:function(state){
                    return state.mycar.carModeldetail;
                },
				carBrandImage:function(state){
				    if(state.mycar.carBrandImage==undefined||state.mycar.carBrandImage==null){
                        return '';
                    }else {
                        return state.mycar.carBrandImage;
                    }
				},
				enterpriseFlag(state) {
				    return state.enterpriseFlag;
				}
			}
		},
		data(){
			return{
				car:'',
				height:''
			}
		},
		ready(){
			var that=this;
			that.height = document.body.clientWidth/4
			var gallery = mui('.mui-slider');
			gallery.slider({
			  interval:0//自动轮播周期，若为0则不自动播放，默认为0；
			});

			this.getJSON(API.GET_CARDETAIL, {}, res => {
                    this.car = res.resultData;
                    });
		},
		methods:{
			goBY(){
				let that = this;
				that.isExist('BY')
			},
			goKQLX(){
				let that = this;
				that.isExist('KQLX');
			},
			goKTLX(){
				let that = this;
				that.isExist('KTLX');
			},
			isExist(from){
				let that = this;
				if(!this.carBrand || this.carBrand.length< 0){
					var mask = mui.createMask();
					mask.show();
					mui.alert('请先配置车辆信息','提示','确定',function(){
						mask.close();
						that.$route.router.go('/ucenter/car/'+from);
					})
				}else{
					that.$route.router.go('/maintenance/'+from);
				}
			}
		},
		components:{
			footerNavComponent
		}
	})
</script>
